<script setup lang="ts">
import { onMounted, useTemplateRef } from 'vue';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

const usingRef = useTemplateRef<HTMLElement>('using');
gsap.registerPlugin(ScrollTrigger);

onMounted(() => {
    const scrollX = usingRef.value!.querySelector('.scroll-x') as HTMLElement;
    // 创建立方体展开动画时间线
    const timeline = gsap.timeline({
        scrollTrigger: {
            scroller: usingRef.value,
            trigger: scrollX,
            start: 'top top',
            end: 'bottom top',
            markers: true,
            pin: true, // 固定 scrollX，使其不随滚动而移动
            scrub: 1, // 根据滚动位置控制动画速度
        },
    });

    const content = scrollX.querySelector('.content') as HTMLElement;

    // 展开动画：只用 top/left 移动，不动 transform
    timeline.to(content, {
        x: -3500,
        ease: 'none',
    });
});
</script>

<template>
    <div class="using" ref="using">
        <div style="height: 300px">1</div>
        <div class="scroll-x">
            <div class="content">
                <div class="card" style="background-color: #ef7676" />
                <div class="card" style="background-color: #466c66" />
                <div
                    class="card"
                    style="background-color: rgba(255, 180, 223, 0.93)"
                />
                <div
                    class="card"
                    style="background-color: rgba(180, 210, 255, 0.93)"
                />
                <div class="card" style="background-color: #68bd68" />
            </div>
        </div>
        <div style="height: 300px; background-color: #1b302d" />
        <div style="height: 300px; background-color: #b98c2a" />
    </div>
</template>

<style scoped lang="scss">
.using {
    height: 300px;
    overflow: auto;

    .scroll-x {
        height: 100%;
        overflow-x: hidden;
        position: sticky;
        top: 0;

        .content {
            height: 100%;
            display: flex;
            justify-content: flex-end;

            .card {
                flex-shrink: 0;
                height: 100%;
                width: 700px;
            }
        }
    }
}
</style>
